<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      <link
      rel="shortcut icon"
      href="http://www.shopin.net/static/favicon.ico"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/post.css" />
    <title>上品折扣注册页</title>
  </head>
  <body>
    <div class="bancen">
      <div class="upside">
        <div class="uplef">
          <a href="http://127.0.0.1:5500/dist/index.html"
            >您好!&emsp;欢迎来到上品折扣</a
          >
        </div>
        <div class="uprig">
          <ul>
            <li>
              <a href="http://127.0.0.1:5500/dist/index.html" target="_blank"
                >我的上品&nbsp;&nbsp;|</a
              >
            </li>
            <li>新手上路</li>
            <li>客服</li>
            <li>帮助&nbsp;&nbsp;|</li>
            <li>关注我们</li>
          </ul>
        </div>
        <span class="lef"></span>
        <span class="rig"></span>
      </div>
      <div class="on"></div>
      <div class="outside">
        <p>注册上品折扣网</p>
        <div class="left">
          <form action="javascript:void(0)">
            <div class="blo">
              <span>账号&nbsp;:</span>
              <input type="text" id="username" />
            </div>
            <div class="non" style="font-size: 12px;">*填写6-20位数字字母下划线账号</div>
            <div class="blo">
              <span>密码&nbsp;:</span>
              <input type="text" id="password" />
            </div>
            <button
              type="submit"
              id="zc"
              style="
                display: block;
                background-color: #f40;
                color: white;
                font-size: 20px;
                width: 220px;
                height: 35px;
                border: none;
                border-radius: 5px;
                margin: 30px 0 0 102px;
              "
            >
              注册
            </button>
            <button
              type="submit"
              id="dl"
              style="
                display: block;
                background-color: #f40;
                color: white;
                font-size: 20px;
                width: 220px;
                height: 35px;
                border: none;
                border-radius: 5px;
                margin: 30px 0 0 102px;
              "
            >
            <a href="http://127.0.0.1:5500/dist/logon.html">
              去登录</a>
            </button>
          </form>
        </div>
        <div class="right">
          <img src="http://www.shopin.net/static/images/img_code1.gif" alt="" />
        </div>
      </div>
    </div>

    <script src="./javascripts/jQuery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
    <script src="./javascripts/utils.js"></script>
    <script>
      // $(function () {
      //   $("#zc").click(function () {
      //     let url = "http://localhost/server/register.php";
      //     xhr("POST", url, {
      //       username: $("#username").val(),
      //       password: $("#password").val(),
      //     }).then(function (res) {
      //       var data = JSON.parse(res);
      //       // console.log(data)
      //       // console.log($("#username").val());
      //       if (data.type === "success") {
      //         alert("注册成功");
      //       } else {
      //         alert("注册失败");
      //       }
      //     });
      //   });
      // 验证必填项
      var username = document.getElementById("username")
      var password = document.getElementById("password")
      $(function () {
        $("#zc").click(function () {
          // console.log(username.value,password.value)
          if (username.value !== "" && password.value !== "") {
            // 6-20位数字字母下划线
            var reg = /^(\w){6,20}$/;
            if (reg.test(username.value)) {
              let url = "http://localhost/server/register.php";
              xhr("POST", url, {
                username: $("#username").val(),
                password: $("#password").val(),
              }).then(function (res) {
                // 请求结束之后我们要根据响应结果做出反馈;
                var data = JSON.parse(res);
                if (data.type === "success") {
                  alert("注册成功");
                  setTimeout(function () {
                    location.href = "./logon.html"; // 跳转到登录页面;
                  }, 1000);
                } else {
                  alert("该账号已存在");
                }
              });
            } else {
              alert("账号格式错误");
            }
          } else {
            alert("请填写完整");
          }
        });
      });
      // 懒加载
      $(function () {
        $(".lazy").lazyload();
      });
    </script>
  </body>
</html>
